import { ComponentProps, useState } from 'react';
import {
  PlankOperator,
  PlankViewer,
  PageContainer,
  PlankInfo,
  PlankPropsValidate,
} from '@/modules';
import { usePlankProps } from '@/hooks';

const log = console.log.bind(null, '[page]');

type Data = Parameters<ComponentProps<typeof PlankOperator>['onChange']>[0];

export default function IndexPage() {
  const [data, setData] = useState<Data>({});
  const { plankData, holeIds, grooveIds, isUseCutting } = data;

  const [plankProps] = usePlankProps({
    plankData,
    holeIds,
    grooveIds,
    isUseCutting,
  });

  return (
    <div className="app">
      <PageContainer
        operator={<PlankOperator onChange={setData} />}
        viewer={{
          main: <PlankViewer plankProps={plankProps} />,
          info: {
            base: <PlankInfo.PlankBaseInfo {...{ plankData }} />,
            holeAndGroove: <PlankInfo.HoleAndGrooveInfo {...{ plankData }} />,
            legend: (
              <PlankInfo.PlankEdgeLegend
                edgeBanding={plankData?.edgeBanding ?? []}
              />
            ),
          },
        }}
        renderViewer={(viewer) => {
          return (
            <PlankPropsValidate plankProps={plankProps}>
              {viewer}
            </PlankPropsValidate>
          );
        }}
      />
    </div>
  );
}
